<template>
  <el-main>
    <div class="t4_banner">
      <div class="t4_w">
        <div class="t4_bannerBOX">
          <el-input
            v-model="searchInfo"
            type="text"
            name="keywords"
            id="keywords"
            placeholder="请输入资源名称"
            clearable
            @keyup.enter.native="getListData"
          >
            <el-button @click="getListData" slot="append" icon="el-icon-search"
              >搜索</el-button
            >
          </el-input>
          <ul class="list_Ul">
            <li v-for="(item, index) in hotWordList" :key="index">
              <a @click="hotClick(item)">{{ item }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="t4_content">
      <div class="t4_contents_top">
        <div class="t4_w" style="position: relative">
          <div class="t4_local">
            <span class="local-tag"
              ><img src="@/assets/images/sub_ts.png" alt=""
            /></span>
            <a href="/">首页</a> &gt; 资源数据 &gt; 主题领域
          </div>
          <div class="t4_API_cons">
            <div class="t4_l t4_l_nav">
              <!-- div1 -->
              <div class="t4_l_cons t4_nav_cons_t">
                <ul class="t4_ulsb" style="padding: 0">
                  <li style="width: 100%; cursor: default">主题领域</li>
                </ul>
                <el-input
                  style="margin: 8px 0 8px"
                  placeholder="输入关键字进行过滤"
                  size="medium"
                  clearable
                  v-model="filterText"
                >
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <div class="t4_border t4_nav_cons">
                  <div class="t4_sub_cons" style="display: block">
                    <ul id="zt" style="padding: 0">
                      <li
                        :style="{
                          background:
                            activeNav === index ? '#d9e1e8' : 'inherit',
                          cursor: 'pointer',
                          padding: '0 20px',
                        }"
                        v-for="(item, index) in filteredDeptArr"
                        :key="index"
                        @click="addTheme(item, index)"
                      >
                        <span>{{ item.name }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- div1 end-->
            </div>
          </div>
          <div
            v-show="!infoFlag"
            class="t4_r t4_r_sj phone_css"
            style="height: auto; min-height: 560px"
          >
            <div class="lTop-box">
              <div class="proList">
                <div class="tit">资源提供方：</div>
                <ul>
                  <!-- <li :class="institutionCodes === ''?'proAct':''" @click="choosePro('')">全部</li> -->
                  <li
                    v-for="(item, index) in providerList"
                    :key="index"
                    @click="choosePro(item)"
                    :class="{ proAct: item.isActive }"
                    :title="item.name"
                  >
                    {{ item.name }}
                  </li>
                  <!-- <li
                    v-for="(item, index) in providerList"
                    :class="institutionCodes === item.code ? 'proAct' : ''"
                    :key="index"
                    @click="choosePro(item)"
                  >
                    {{ item.name }}
                  </li> -->
                </ul>
              </div>
            </div>
            <div class="listToggle">
              <span @click="toggleList('info')"
                ><img style="width: 18px" :src="infoImg" alt=""
              /></span>
              <span @click="toggleList('list')"
                ><img style="width: 20px" :src="listImg" alt=""
              /></span>
            </div>
            <div class="t4_r_top t4_border" style="height: auto">
              <div class="t4_r_sjCons">
                <!-- 目录列表 -->
                <div class="t4_sjCons" style="display: block">
                  <div
                    v-if="listFlag === 'info'"
                    v-for="(item, index) in infoList"
                    :key="index"
                    class="t2_sjCons_list t2_result_list_r2"
                  >
                    <h2 class="titBox">
                      <a @click="infoHandle(item)"
                        ><img
                          src="@/assets/images/link.png"
                          style="padding: 0 8px; height: 24px"
                        />{{ item.name }}</a
                      >
                      <div class="sqBtn">
                        <el-button plain size="small" @click="approvalBtn(item)"
                          >申&nbsp;请</el-button
                        >
                      </div>
                    </h2>
                    <div class="zyInfoBox">
                      <div>
                        <el-checkbox></el-checkbox>
                      </div>
                      <div class="zyInfo">
                        <div>资源分类：{{ item.catalogName }}</div>
                        <div class="infoItem_box">
                          <div class="infoItem">
                            <div>资源提供方：{{ item.institutionName }}</div>
                            <div>
                              共享类型：{{
                                initInfo(item.shareType, "shareType")
                              }}
                            </div>
                          </div>
                          <div class="infoItem">
                            <div>创建时间：{{ item.createTime }}</div>
                            <div>
                              共享条件：{{
                                item.shareCondition ? item.shareCondition : "无"
                              }}
                            </div>
                          </div>
                          <div class="infoItem">
                            <div>更新日期：{{ item.updateTime }}</div>
                            <div>
                              更新周期：{{
                                initInfo(item.updateCycle, "updateCycle")
                              }}
                            </div>
                          </div>
                          <div class="infoItem">
                            <div>
                              资源类型：{{
                                initInfo(item.resourceType, "resourceType")
                              }}
                            </div>
                            <div>
                              共享方式：
                              <div
                                class="imgBox"
                                v-for="(param, index) in initInfo(
                                  item.shareMethod,
                                  'ShareMode'
                                )"
                                :key="index"
                              >
                                <el-tooltip
                                  class="item"
                                  effect="dark"
                                  :content="param.name"
                                  placement="top"
                                >
                                  <img
                                    :class="param.code == 0 ? 'sqlImg' : ''"
                                    :src="param.src"
                                    alt=""
                                  />
                                </el-tooltip>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="listFlag === 'list'">
                    <el-table
                      :data="infoList"
                      border
                      style="width: 100%; margin-top: 25px"
                      @selection-change="handleSelectionChange"
                    >
                      <el-table-column type="selection" width="45">
                      </el-table-column>
                      <el-table-column
                        prop="name"
                        show-overflow-tooltip
                        label="信息资源名称"
                      >
                        <template slot-scope="scope">
                          <a
                            @click="infoHandle(scope.row)"
                            style="cursor: pointer"
                            >{{ scope.row.name }}</a
                          >
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="institutionName"
                        label="资源提供方"
                        show-overflow-tooltip
                        width="110"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="信息项数量"
                        width="100"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="shareMethod"
                        label="共享方式"
                        width="100"
                      >
                        <template slot-scope="scope">
                          <div
                            class="imgBox"
                            v-for="(param, index) in initInfo(
                              scope.row.shareMethod,
                              'ShareMode'
                            )"
                            :key="index"
                          >
                            <el-tooltip
                              class="item"
                              effect="dark"
                              :content="param.name"
                              placement="top"
                            >
                              <img
                                :class="param.code == 0 ? 'sqlImg' : ''"
                                :src="param.src"
                                alt=""
                              />
                            </el-tooltip>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="shareType"
                        label="共享类型"
                        :formatter="formatterRow"
                        width="100"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="updateTime"
                        label="更新时间"
                        width="180"
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                  <!-- 空状态 -->
                  <el-empty
                    description="暂无数据"
                    v-if="infoList == null"
                  ></el-empty>
                  <div class="" id="pageDiv">
                    <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-size="pageSize"
                      :page-sizes="[10, 20, 50, 100]"
                      layout="prev, pager, next, sizes, jumper"
                      :total="totalNum"
                    >
                    </el-pagination>
                  </div>
                </div>
                <!-- 目录列表 end -->
              </div>
            </div>
          </div>
          <div
            v-show="infoFlag"
            class="t4_r t4_r_sj phone_css"
            style="height: auto; min-height: 560px"
          >
            <div class="listToggle backBtn">
              <el-button size="small" type="primary" @click="infoFlag = false"
                >返回列表</el-button
              >
            </div>
            <!-- 数据资源 -->
            <dataInfo
              :updateCycleList="updateCycleList"
              :shareTypeList="shareTypeList"
              :ShareModeList="ShareModeList"
              :resTpye="resTpye"
              v-show="activeValue == 0"
            ></dataInfo>
            <!-- 服务资源 -->
            <dataInfo1
              :updateCycleList="updateCycleList"
              :shareTypeList="shareTypeList"
              :ShareModeList="ShareModeList"
              :resTpye="resTpye"
              v-show="activeValue == 1"
            ></dataInfo1>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="资源申请"
      :visible.sync="approvalDialog.show"
      top="40px"
      width="1100px"
      append-to-body
    >
      <!-- infoList -->
      <approval
        v-if="approvalDialog.show"
        :dataList="isActiveDuo == 0 ? ItemProps : infoList"
        @closeDialog="handleCloseDialog"
      ></approval>
    </el-dialog>
  </el-main>
</template>

<script>
import approval from "../../views/dataDirectory/approval.vue";
import { addr } from "../../assets/js/public.js";
import dataInfo from "../../views/dataDirectory/dataInfo.vue";
import dataInfo1 from "../../views/serviceDirectory/dataInfo.vue";
import {
  topFive,
  getServerData,
  getServerResList,
  getProviderList,
  getUpdateCycle,
  getServeSeek,
  getTheme,
  getSeek,
} from "../../utils/httpUtils";
import listImg from "@/assets/images/list.png";
import listImgAct from "@/assets/images/list-act.png";
import infoImg from "@/assets/images/infoList.png";
import infoImgAct from "@/assets/images/infoList-act.png";
import sqlImg from "@/assets/images/sql.png";
import apiImg from "@/assets/images/APIserve.png";
import fileImg from "@/assets/images/file.png";

export default {
  name: "index",
  components: {
    dataInfo,
    dataInfo1,
    approval,
  },
  data() {
    return {
      approvalDialog: {
        show: false,
      },
      isActiveDuo: -1,
      ItemProps: [],
      resTpye: "",
      infoFlag: false,
      listFlag: "info",
      checkList: [],
      filterText: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 热门关键词
      hotWordList: [],
      // 搜索内容
      searchInfo: "",
      deptArr: [],
      deptAct: "",
      infoList: [],
      listImg: listImg,
      infoImg: infoImgAct,
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      totalNum: 0,
      pageNo: 1,
      // 默认展示经济专题 code
      code: "cedfe17022e749239616f747110318ed",
      name: "",
      institutionCodes: "",
      providerList: [
        { name: "全部", type: 0, isActive: true },
        { name: "数据资源", type: 0, isActive: false },
        { name: "服务资源", type: 1, isActive: false },
      ],
      updateCycleList: [],
      shareTypeList: [],
      ShareModeList: [],
      resTypeList: [
        {
          code: 0,
          name: "数据资源",
        },
        {
          code: 1,
          name: "服务资源",
        },
      ],
      activeNav: 0,
      activeValue: 1,
    };
  },
  mounted() {
    this.init();
  },
  created() {
    if (this.$route.query.catalogData) {
      this.$nextTick(() => {
        this.infoHandle(this.$route.query.catalogData);
      });
    }
  },
  computed: {
    filteredDeptArr() {
      // 根据过滤关键字筛选出符合条件的列表项
      return this.deptArr.filter((item) =>
        item.name.toLowerCase().includes(this.filterText.toLowerCase())
      );
    },
  },
  methods: {
    handleCloseDialog() {
      // 处理 closeDialog 事件
      this.approvalDialog.show = false;
    },
    // 申请按钮
    approvalBtn(parmas) {
      if (this.ItemProps.length > 1) {
        console.log("数据大于1了说明是选择了多条");
        // this.isActiveDuo = 1;
      } else {
        this.isActiveDuo = 0;
        // const items = this.infoList.find((item) => item.id == parmas.id);
        // this.ItemProps = [items];
        const items = this.infoList.find((item) => item.id == parmas.id);
        items.isAct = true; // 将isAct属性设置为true
        this.ItemProps = [items];
      }
      // this.ItemProps = [parmas];
      this.approvalDialog = {
        show: true,
      };
      setTimeout(() => {
        this.infoList.forEach((item) => (item.isAct = false));
      }, 1000);
    },
    addTheme(item, index) {
      this.activeNav = index;
      this.code = item.code;
      // 获取列表接口
      this.getListData();
    },
    init() {
      this.getHotWord();
      this.getData();
      // this.getProvider();
      // this.getTypeList();
    },
    getTypeList() {
      //获取更新频率字段
      getUpdateCycle("updateCycle").then((res) => {
        if (res) {
          this.updateCycleList = res.data;
        }
      });
      // 获取共享类型字段
      getUpdateCycle("shareType").then((res) => {
        if (res) {
          this.shareTypeList = res.data;
        }
      });
      // 获取共享方式字段
      getUpdateCycle("ShareMode").then((res) => {
        if (res) {
          this.ShareModeList = res.data;
        }
      });
    },
    // 获取数据
    async getData() {
      getTheme().then((res) => {
        if (Array.isArray(res.data) && res.data.length === 0) {
          // 当 res.data 是空数组时的处理逻辑
        } else {
          // 当 res.data 不是空数组时的处理逻辑
          this.deptArr = res.data;
          this.code = res.data[0].code;
          this.getListData();
        }
      });
    },
    // 获取资源提供方
    // getProvider() {
    //   getProviderList().then((res) => {
    //     if (res) {
    //       this.providerList = res.data;
    //     }
    //   });
    // },
    infoHandle(val) {
      this.activeValue = val.resourceType;
      this.infoFlag = true;
      this.$bus.$emit("busInfo", val.code);
      // document.documentElement.scrollTop = 250;
    },
    // 获取列表数据
    getListData() {
      let param = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        themeCode: this.code || "",
        name: this.searchInfo,
        institutionCodes: this.institutionCodes,
      };
      getSeek(param).then((res) => {
        if (res.data) {
          this.infoList = res.data.totalList.map((item) => {
            return { ...item, isAct: false }; // 返回一个新对象，包括原有属性和新的 isAct 属性
          });
          this.currentPage = res.data.currentPage;
          this.pageSize = res.data.pageSize;
          this.totalNum = res.data.totalPageNum;
        }
      });
    },
    // 点击树形结构
    // chooseDeptList(data, node) {
    //   this.code = data.code;
    //   this.getListData();
    // },
    // 选择资源提供方
    choosePro(item) {
      this.providerList.forEach((p) => (p.isActive = false)); // 先将所有项的 isActive 属性设为 false
      item.isActive = true; // 再将当前项的 isActive 属性设为 true
      let param = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        themeCode: this.code,
        name: this.name,
        institutionCodes: this.institutionCodes,
        type: item.type,
      };
      getSeek(param).then((res) => {
        this.infoList = res.data.totalList;
        this.currentPage = res.data.currentPage;
        this.pageSize = res.data.pageSize;
        this.totalNum = res.data.totalPageNum;
      });
      // getSeek(param).then((res) => {
      //   if (res.data) {
      //     this.infoList = res.data.totalList;
      //     this.currentPage = res.data.currentPage;
      //     this.pageSize = res.data.pageSize;
      //     this.totalNum = res.data.totalPageNum;
      //   }
      // });
    },
    // 改变数据显示条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getListData();
    },
    async getHotWord() {
      // 热门关键词
      const { data: res } = await topFive();
      if (res) {
        this.hotWordList = res;
      }
    },
    hotClick(val) {
      this.searchInfo = val;
      this.getListData();
    },
    // 切换数据显示样式
    toggleList(val) {
      this.listFlag = val;
      if (val === "info") {
        if (this.infoImg === infoImg) {
          this.infoImg = infoImgAct;
          this.listImg = listImg;
        }
      } else {
        if (this.listImg === listImg) {
          this.listImg = listImgAct;
          this.infoImg = infoImg;
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 格式化数据
    initInfo(val, type) {
      if (type === "updateCycle") {
        let isHas = this.updateCycleList.find((item) => {
          return item.code == val;
        });
        if (isHas) {
          return isHas.name;
        }
      } else if (type === "shareType") {
        let isHas = this.shareTypeList.find((item) => {
          return item.code == val;
        });
        if (isHas) {
          return isHas.name;
        }
      } else if (type === "resourceType") {
        let isHas = this.resTypeList.find((item) => {
          return item.code == val;
        });
        if (isHas) {
          this.resTpye = isHas.name;
          return isHas.name;
        }
      } else if (type === "ShareMode") {
        let arr = val.split(",");
        let arrTemp = [];
        for (let i = 0; i < arr.length; i++) {
          let isHas = this.ShareModeList.find((item) => {
            return item.code == arr[i];
          });
          if (isHas) {
            arrTemp.push({
              code: isHas.code,
              name: isHas.name,
              src:
                isHas.code == 0
                  ? sqlImg
                  : isHas.code == 1
                  ? fileImg
                  : isHas.code == 2
                  ? apiImg
                  : "",
            });
          }
        }
        return arrTemp;
      }
    },
    formatterRow(row) {
      return this.initInfo(row.shareType, "shareType");
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // setScroll() {
    //   //滚动条
    //   $(".t4_sub_cons").niceScroll({
    //     styler: "fb",
    //     cursorcolor: "#d5d5d5",
    //     cursorwidth: "5",
    //     cursorborderradius: "5px",
    //     background: "#edeef0",
    //     cursorborder: "",
    //   });
    // },
    clearText(event) {
      event.stopPropagation();
      this.searchInfo = "";
    },
  },
};
</script>

<style scoped>
.el-main {
  padding: 0;
}
.t4_qb {
  width: 70px;
  padding: 5px;
  background: #198ef8;
  float: left;
  text-align: center;
  cursor: pointer;
}
.t4_qb a {
  color: #fff;
}
.t4_r.t4_r_sj.t4_border.phone_css {
  height: 950px;
}
.t4_search ul li:hover {
  background: rgba(255, 255, 255, 0.1);
}
.lTop-box {
  padding: 0 0 15px;
  background-color: #f7f8fa;
}
.lTop-box .proList {
  padding: 15px 30px;
  background-color: #fff;
  border-bottom: 4px solid #198ef8;
  display: flex;
  flex-direction: row;
}
.lTop-box .proList .tit {
  width: 85px;
  padding: 5px 0;
}
.lTop-box .proList ul {
  flex: 1;
  padding: 0;
  margin: 0;
}
.lTop-box .proList ul li {
  float: left;
  text-align: center;
  padding: 5px 10px;
  height: 30px;
  width: 18.5%;
  margin: 0 5px;
  background-color: #f8f8f8;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 24px;
  padding-right: 24px;
}
.lTop-box .proList ul li.proAct {
  background-color: #f1f8ff;
  color: #204dac;
}
.listToggle {
  padding: 13px 20px;
}
.listToggle span {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}
.listToggle.backBtn {
  border-bottom: 4px solid #198ef8;
}
#pageDiv {
  text-align: center;
  padding: 20px;
}
#pageDiv /deep/ .el-select__caret {
  width: auto;
  height: auto;
}
#pageDiv /deep/ .el-pagination__jump {
  color: #606266;
  margin: 0;
}
.gxfs img {
  width: 20px;
}
.zyInfoBox {
  display: flex;
  flex-direction: row;
}
.zyInfoBox .zyInfo {
  flex: 1;
  margin-left: 8px;
  font-size: 13px;
}
.zyInfoBox .zyInfo .infoItem_box {
  display: flex;
  flex-direction: row;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem {
  flex: 1;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem > div {
  margin-top: 8px;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox,
.el-table .imgBox {
  display: inline-block;
  margin-right: 5px;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img.sqlImg,
.el-table .imgBox img.sqlImg {
  width: 18px;
}
.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img,
.el-table .imgBox img {
  width: 22px;
}
.remark {
  font-size: 12px;
  margin-bottom: 10px;
  color: #c4c4c4;
}
h2.titBox {
  position: relative;
}
h2.titBox .sqBtn {
  position: absolute;
  right: 0;
  top: 0;
}
h2.titBox a {
  cursor: pointer;
}
.t4_banner {
  position: relative;
}
.t4_banner .t4_bannerBOX {
  width: 90%;
  margin: 0 auto;
}
.t4_bannerBOX .list_Ul {
  cursor: pointer;
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 40px;
  height: 10px;
}
.list_Ul li {
  margin-left: 10px;
  color: #5f5f5f;
}
a:hover {
  background: rgba(255, 255, 255, 0.1);
}
/deep/.t4_banner .el-input-group--append .el-input__inner {
  height: 50px;
  line-height: 50px;
  background: #fff;
  border: 1px solid #fff;
  color: rgb(99, 99, 99);
  text-indent: 15px;
}
/deep/.t4_banner .el-input-group__append {
  background-color: #198ef8;
  color: #fff;
  border: none;
}
</style>
